<template>
  <div class="pick-content">
    <div class="pickModel-main">
      <ul ref="list" @touchstart="pockerShowTouchstart($event)" @touchmove="pockerShowTouchmove($event)" @touchend="pockerShowTouchend($event)">
        <li :class="{'pickModel-li':true,'pickModelSelectLi':isSelectLi == index}" v-for="(item,index) in renderData" :key="index">
          {{item.value}}
        </li>
      </ul>
    </div>
    <div class="pick-bottom-select">
    </div>
  </div>
</template>
<script>
export default {
  props: {
    postfix: {
      default: ""
    },
    defIndex: {
      default: "1"
    },
    defStateIndex: {
      default: "1"
    },
    selectIndex: {
      default: "1"
    },
    pockerunit: {
      default: "1"
    },
    listData: {
      type: Array,
      default: []
    },
    type: {
      type: String,
      default: "cycle" // line 非无限滚动 cycle 无限滚动
    },
    value: {}
  },
  data() {
    return {
      isSelectLi: 7,
      tempArr: [],
      stTime: "",
      liHeight: 48, // 单元素高度
      accelerated: 1.3, // 加速度
      spin: { start: -5, end: 5, branch: 5 }, // 选中上方，下方，以及展示页面个数
      finger: { startY: 0, lastY: 0, startTime: 0, lastTime: 0, transformY: 0 }
    };
  },
  created: function() {
    var self = this;
  },
  mounted: function() {
    // this.setListTransform(0, 0);
    let self = this;
    let index = this.listData.indexOf(self.value);
    if (index == -1) {
      this.setListTransform(-0 * this.liHeight, -2 * this.liHeight);
    } else {
      index = index - 2;
      let move = index * this.liHeight;
      /* 因为往上滑动所以是负 */
      this.setStyle(-move);
      this.setListTransform(-move, -move);
    }
  },
  update() {
    var self = this;
  },
  computed: {
    renderData() {
      let temp = [];
      for (let k = this.spin.start; k <= this.spin.end; k++) {
        let data = {
          value: this.getSpinData(k),
          index: k
        };
        temp.push(data);
      }
      return temp;
    }
  },
  watch: {},
  update() {},
  methods: {
    /* 获取选中值 */
    getPickValue(move) {
      let index = Math.round(Math.abs(move / this.liHeight));
      // console.log(this.tempArr[this.spin.branch + 2].value);
      this.$emit("input", this.tempArr[this.spin.branch + 2].value);
      // this.$emit("change", {
      //   value: this.tempArr[this.spin.branch].value,
      //   start: this.spin.start,
      //   end: this.spin.end
      // });
    },
    /* 整理数据 */
    getSpinData(index) {
      index = index % this.listData.length;
      return this.listData[index >= 0 ? index : index + this.listData.length];
    },
    setStyle(move, type, time) {
      let currentListMove = this.finger.transformY;
      let upickateMove = move + Number(currentListMove);
      let spinAim = Math.round(-upickateMove / this.liHeight);

      let margin = Math.round(upickateMove / this.liHeight) * this.liHeight;
      let endMove = margin;
      this.upickateSpin(spinAim);
      if (type === "end") {
        this.setListTransform(endMove, margin, type, time);
        setTimeout(() => this.getPickValue(endMove), 0);
      } else {
        this.setListTransform(upickateMove, margin);
      }
    },
    // 滚动事件
    setListTransform(translateY = 0, marginTop = 0, type, time = 1000) {
      if (type === "end") {
        this.$refs.list.style.webkitTransition = `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`;
        this.$refs.list.style.webkitTransform = `translateY(${translateY -
          this.spin.branch * this.liHeight}px)`;
        this.$refs.list.style.marginTop = `${-marginTop}px`;
        this.$refs.list.setAttribute("scroll", translateY);
      } else {
        this.$refs.list.style.webkitTransition = "";
        this.$refs.list.style.webkitTransform = `translateY(${translateY -
          this.spin.branch * this.liHeight}px)`;
        this.$refs.list.style.marginTop = `${-marginTop}px`;
        this.$refs.list.setAttribute("scroll", translateY);
      }
    },
    /* 更新数据源 */
    upickateSpin(spinAim) {
      let self = this;
      this.spin.start = this.spin.branch * -1 + spinAim;
      this.spin.end = this.spin.start + this.spin.branch * 2;
      this.isSelectLi = 7;
      self.tempArr = [];
      for (let k = this.spin.start; k <= this.spin.end; k++) {
        let data = {
          value: this.getSpinData(k),
          index: k
        };
        self.tempArr.push(data);
      }
    },
    pockerShowTouchstart(event) {
      let finger = event.changedTouches[0];
      this.finger.startY = finger.pageY;
      this.finger.startTime = event.timestamp || Date.now();
      this.finger.transformY = this.$refs.list.getAttribute("scroll");
      event.preventDefault();
    },
    pockerShowTouchmove(event) {
      var self = this;
      let finger = event.changedTouches[0];
      this.finger.lastY = finger.pageY;
      this.finger.lastTime = event.timestamp || Date.now();
      let move = this.finger.lastY - this.finger.startY;
      this.setStyle(move);
      // this.isSelectLi = 7;
      event.preventDefault();
    },
    pockerShowTouchend(event) {
      var self = this;
      let finger = event.changedTouches[0];
      this.finger.lastY = finger.pageY;
      this.finger.lastTime = event.timestamp || Date.now();
      let move = this.finger.lastY - this.finger.startY;
      let time = this.finger.lastTime - this.finger.startTime;
      let v = move / time;
      if (time <= 300) {
        move = v * this.accelerated * time;
        time = 1000 + time * this.accelerated;
        this.setStyle(move, "end", time);
      } else {
        this.setStyle(move, "end");
      }
    }
  }
};
</script>
<style scoped>
.pickModel-li {
  height: 48px;
  width: 100%;
  text-align: center;
  line-height: 48px;
  font-size: 16px;
  color: #ccc;
}
.pickModelSelectLi {
  color: #000 !important;
}
.pick-bottom-select {
  position: absolute;
  top: 96px;
  left: 0;
  width: 100%;
  height: 48px;
  border-bottom: 1px solid #c3defa;
  border-top: 1px solid #c3defa;
}

.pickModel-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 240px;
  overflow-y: hidden;
  overflow-x: hidden;
  z-index: 2001;
}

.pick-content {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 240px;
  background-color: #fff;
  z-index: 2001;
  position: relative;
}
</style>